/*
 * @Date: 2022-03-28 16:01:59
 * @LastEditors: LiuPeng
 * @LastEditTime: 2022-04-12 09:18:48
 * @FilePath: \pay\src\components\NavBar\index.jsx
 */
import React, { useState, Suspense, useRef } from 'react'
import { Layout, Menu, Row, Col, Badge, Popover, Button, Spin, Modal, Form, Input, ConfigProvider, notification } from 'antd'
import { MenuUnfoldOutlined, MenuFoldOutlined, StarTwoTone, BugTwoTone, BellOutlined, UserOutlined, LoadingOutlined, SettingTwoTone, HomeTwoTone, ContactsTwoTone, ReconciliationTwoTone, ProjectTwoTone, HddTwoTone, WalletTwoTone } from '@ant-design/icons'
import styles from './index.module.css'
import { NavLink, useRoutes, useNavigate } from 'react-router-dom';
import routes from '../../routers'
import zhCN from 'antd/es/locale/zh_CN'

import { loginOut } from '../../API';

const { SubMenu } = Menu
const { Header, Sider, Content } = Layout
export default function NavBar() {
  const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />
  const Navigate = useNavigate()
  const element = useRoutes(routes)
  const [coll, changecoll] = useState(false)
  const [load, Changeload] = useState(false)
  const [modashow, setModalShow] = useState(false)

  // 获取用户名
  const { uName } = JSON.parse(localStorage.getItem('user')) || ''
  // 获取登录用户身份
  const userIdentity = localStorage.getItem('userIdentity') || ''
  console.log(userIdentity);

  // 密码修改
  const myRef1 = useRef()
  const myRef2 = useRef()
  const myRef3 = useRef()
  // modal内容
  const content = (
    <div>
      <p> <Button onClick={() => Base('top')} type="link">基本资料</Button></p>
      <p> <Button onClick={ModifyPassword} type="link">修改密码</Button></p>
      <ConfigProvider locale={zhCN}>
        <Modal title="修改密码" visible={modashow} onOk={handleOK} onCancel={handleCancel}>
          <Form>
            <Form.Item
              label="原始密码"
              name="password"
              rules={[{ required: true, message: '请输入原始密码' }]}
            >
              <Input.Password ref={myRef1} />
            </Form.Item>
            <Form.Item
              label="更新密码"
              name="NewPassword"
              rules={[{ required: true, message: '请输入新密码' }]}
            >
              <Input.Password ref={myRef2} />
            </Form.Item>
            <Form.Item
              label="确认密码"
              name="confirm"
              rules={[{ required: true, message: '再次输入密码' }]}
            >
              <Input.Password ref={myRef3} />
            </Form.Item>
          </Form>
        </Modal>
      </ConfigProvider>
      <p> <Button onClick={Out} type="link" >退出</Button></p>
    </div>
  )
  const Info = placement => {
    notification.info({
      message: `Notification ${placement}`,
      description:
        'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
      placement,
    });
  }
  function toggle() {
    changecoll(!coll)
  }
  const Base = placement => {
    notification.open({

      message: `欢迎您${uName}`,
      placement
    })
  }
  function ModifyPassword() {
    setModalShow(true)
  }
  function handleOK() {
    // 更新密码
    console.log(myRef1.current.input.value);
    console.log(myRef2.current.input.value);
    console.log(myRef3.current.input.value);
    setModalShow(false)
  }
  function handleCancel() {
    setModalShow(false)
  }
  function Out() {
    loginOut({
      username: JSON.parse(localStorage.getItem('user')).uName
    }).then(res => {
      if (res.code === 500) {
        Changeload(true)
        localStorage.removeItem('user')
        localStorage.removeItem('token')
        localStorage.removeItem('userIdentity')

        setTimeout(() => {
          Navigate('/login')
        }, 1000)
      }
    })
  }

  // 身份验证
  const Authenticat = () => {
    switch (userIdentity) {
      case '管理员':
        return (
          <>
            <SubMenu key='sub1' title="首页" icon={<HomeTwoTone twoToneColor="#3eca69" />}>
              <Menu.Item key='1'>
                <NavLink to='main'>首页</NavLink>
              </Menu.Item>
            </SubMenu>
            <SubMenu key='sub8' title="代付后台卡商管理" icon={<HddTwoTone twoToneColor="#3eca69" />}>
              <Menu.Item key='002'>
                <NavLink to='payGroundCardset'>代付后台商户配置</NavLink>
              </Menu.Item>
              <Menu.Item key='003'>
                <NavLink to='payGroundCardList'>代付后台卡商列表</NavLink>
              </Menu.Item>
              <Menu.Item key='004'>
                <NavLink to='payGroundCardDetail'>代付后台卡商明细</NavLink>
              </Menu.Item>
              <Menu.Item key='005'>
                <NavLink to='payGroundOrder'>代付后台代付订单</NavLink>
              </Menu.Item>
            </SubMenu>
            <SubMenu key='sub7' title="代付后台商户管理" icon={<ProjectTwoTone twoToneColor="#1890ff" />}>
              <Menu.Item key='w'>
                <NavLink to='payGroundList'>代付后台商户列表</NavLink>
              </Menu.Item>
              <Menu.Item key='x'>
                <NavLink to='payGroundRequest'>代付后台入金请求</NavLink>
              </Menu.Item>
              <Menu.Item key='y'>
                <NavLink to='payGroundTable'>代付后台财务报表</NavLink>
              </Menu.Item>
              <Menu.Item key='z'>
                <NavLink to='payGroundRecord'>代付后台入金记录</NavLink>
              </Menu.Item>
              <Menu.Item key='001'>
                <NavLink to='payGroundAccunt'>代付后台商户账变</NavLink>
              </Menu.Item>
            </SubMenu>
          </>
        )
      case '商户代理':
        return (
          <>
            <SubMenu key='sub5' title="代理商户管理" icon={<StarTwoTone twoToneColor="#fcc64a" />}>
              <Menu.Item key='n'>
                <NavLink to='agencyTenantInfo'>代理商户信息</NavLink>
              </Menu.Item>
              <Menu.Item key='o'>
                <NavLink to='agencyTenantList'>代理商户列表</NavLink>
              </Menu.Item>
              <Menu.Item key='p'>
                <NavLink to='agencyTenantAccout'>代理商户账变</NavLink>
              </Menu.Item>
              <Menu.Item key='q'>
                <NavLink to='agencyPayRequset'>代理入金请求</NavLink>
              </Menu.Item>
              <Menu.Item key='r'>
                <NavLink to='agencyPayRecord'>代理入金记录</NavLink>
              </Menu.Item>
            </SubMenu>
            <SubMenu key='sub6' title="代理代付管理" icon={<BugTwoTone twoToneColor="#ff4402" />}>
              <Menu.Item key='s'>
                <NavLink to='agencyPayOrder'>代理代付订单</NavLink>
              </Menu.Item>
              <Menu.Item key='t'>
                <NavLink to='agencyPaySet'>代理代付配置</NavLink>
              </Menu.Item>
              <Menu.Item key='u'>
                <NavLink to='agencyCardList'>代理卡商列表</NavLink>
              </Menu.Item>
              <Menu.Item key='v'>
                <NavLink to='agencyCardDetail'>代理卡商明细</NavLink>
              </Menu.Item>
            </SubMenu>
          </>
        )
      case '商户':
        return (
          <>
            <SubMenu key='sub2' title="商户管理" icon={<ContactsTwoTone twoToneColor="#fcc64a" />}>
              <Menu.Item key='a'>
                <NavLink to='tenantInfo'>商户信息</NavLink>
              </Menu.Item>
              <Menu.Item key='b'>
                <NavLink to='tenantRecharge'>商户手工充值</NavLink>
              </Menu.Item>
              <Menu.Item key='c'>
                <NavLink to='tenantApply'>商户充值申请</NavLink>
              </Menu.Item>
              <Menu.Item key='d'>
                <NavLink to='tenantDeatil'>商户资金明细</NavLink>
              </Menu.Item>
              <Menu.Item key='e'>
                <NavLink to='tenantRecord'>商户充值记录</NavLink>
              </Menu.Item>
            </SubMenu>
            <SubMenu key='sub3' title="商户代付管理" icon={<ReconciliationTwoTone twoToneColor="#ff4402" />}>
              <Menu.Item key='f'>
                <NavLink to='tenantAgency'>商户代付订单</NavLink>
              </Menu.Item>
            </SubMenu>
          </>
        )

      case '卡商':
        return (
          <>
            <SubMenu key='sub4' title="代付管理" icon={<SettingTwoTone twoToneColor="#1890ff" />}>
              <Menu.Item key='g'>
                <NavLink to='agencyOrder'>代付代理订单</NavLink>
              </Menu.Item>
              <Menu.Item key='h'>
                <NavLink to='agencyRequest'>代付入金请求</NavLink>
              </Menu.Item>
              <Menu.Item key='m'>
                <NavLink to='agencyDetail'>代付资金明细</NavLink>
              </Menu.Item>
            </SubMenu>
          </>
        )
      default:
        Navigate('/login')
    }
  }
  return (
    <div>
      <Spin spinning={load} size='large' indicator={antIcon}>
        <Layout hasSider>
          <Sider trigger={null} collapsible collapsed={coll} style={{
            overflow: 'auto',
            height: '100vh',
            position: 'fixed',
            top: '0',
            left: '0'
          }}>
            <div className={styles.title} >
              {coll ? <p className={styles.yong}>M</p> : <p className={styles.yon}>MonBIP</p>}
            </div>
            <div>
              <Menu theme='dark' mode='inline' >

                {Authenticat()}

                {/* <SubMenu key='sub1' title="首页" icon={<HomeTwoTone twoToneColor="#3eca69" />}>
                  <Menu.Item key='1'>
                    <NavLink to='main'>首页</NavLink>
                  </Menu.Item>
                </SubMenu>
                <SubMenu key='sub8' title="代付后台卡商管理" icon={<HddTwoTone twoToneColor="#3eca69" />}>
                  <Menu.Item key='002'>
                    <NavLink to='payGroundCardset'>代付后台商户配置</NavLink>
                  </Menu.Item>
                  <Menu.Item key='003'>
                    <NavLink to='payGroundCardList'>代付后台卡商列表</NavLink>
                  </Menu.Item>
                  <Menu.Item key='004'>
                    <NavLink to='payGroundCardDetail'>代付后台卡商明细</NavLink>
                  </Menu.Item>
                  <Menu.Item key='005'>
                    <NavLink to='payGroundOrder'>代付后台代付订单</NavLink>
                  </Menu.Item>
                </SubMenu> */}


                {/* <SubMenu key='sub4' title="代付管理" icon={<SettingTwoTone twoToneColor="#1890ff" />}>
                  <Menu.Item key='g'>
                    <NavLink to='agencyOrder'>代付代理订单</NavLink>
                  </Menu.Item>
                  <Menu.Item key='h'>
                    <NavLink to='agencyRequest'>代付入金请求</NavLink>
                  </Menu.Item>
                  <Menu.Item key='m'>
                    <NavLink to='agencyDetail'>代付资金明细</NavLink>
                  </Menu.Item>
                </SubMenu> */}


                {/* <SubMenu key='sub2' title="商户管理" icon={<ContactsTwoTone twoToneColor="#fcc64a" />}>
                  <Menu.Item key='a'>
                    <NavLink to='tenantInfo'>商户信息</NavLink>
                  </Menu.Item>
                  <Menu.Item key='b'>
                    <NavLink to='tenantRecharge'>商户手工充值</NavLink>
                  </Menu.Item>
                  <Menu.Item key='c'>
                    <NavLink to='tenantApply'>商户充值申请</NavLink>
                  </Menu.Item>
                  <Menu.Item key='d'>
                    <NavLink to='tenantDeatil'>商户资金明细</NavLink>
                  </Menu.Item>
                  <Menu.Item key='e'>
                    <NavLink to='tenantRecord'>商户充值记录</NavLink>
                  </Menu.Item>
                </SubMenu> */}

                {/* <SubMenu key='sub3' title="商户代付管理" icon={<ReconciliationTwoTone twoToneColor="#ff4402" />}>
                  <Menu.Item key='f'>
                    <NavLink to='tenantAgency'>商户代付订单</NavLink>
                  </Menu.Item>
                </SubMenu> */}

                {/* <SubMenu key='sub5' title="代理商户管理" icon={<StarTwoTone twoToneColor="#fcc64a" />}>
                  <Menu.Item key='n'>
                    <NavLink to='agencyTenantInfo'>代理商户信息</NavLink>
                  </Menu.Item>
                  <Menu.Item key='o'>
                    <NavLink to='agencyTenantList'>代理商户列表</NavLink>
                  </Menu.Item>
                  <Menu.Item key='p'>
                    <NavLink to='agencyTenantAccout'>代理商户账变</NavLink>
                  </Menu.Item>
                  <Menu.Item key='q'>
                    <NavLink to='agencyPayRequset'>代理入金请求</NavLink>
                  </Menu.Item>
                  <Menu.Item key='r'>
                    <NavLink to='agencyPayRecord'>代理入金记录</NavLink>
                  </Menu.Item>
                </SubMenu> */}
                {/* <SubMenu key='sub6' title="代理代付管理" icon={<BugTwoTone twoToneColor="#ff4402" />}>
                  <Menu.Item key='s'>
                    <NavLink to='agencyPayOrder'>代理代付订单</NavLink>
                  </Menu.Item>
                  <Menu.Item key='t'>
                    <NavLink to='agencyPaySet'>代理代付配置</NavLink>
                  </Menu.Item>
                  <Menu.Item key='u'>
                    <NavLink to='agencyCardList'>代理卡商列表</NavLink>
                  </Menu.Item>
                  <Menu.Item key='v'>
                    <NavLink to='agencyCardDetail'>代理卡商明细</NavLink>
                  </Menu.Item>
                </SubMenu> */}
                {/*                 
                <SubMenu key='sub7' title="代付后台商户管理" icon={<ProjectTwoTone twoToneColor="#1890ff" />}>
                  <Menu.Item key='w'>
                    <NavLink to='payGroundList'>代付后台商户列表</NavLink>
                  </Menu.Item>
                  <Menu.Item key='x'>
                    <NavLink to='payGroundRequest'>代付后台入金请求</NavLink>
                  </Menu.Item>
                  <Menu.Item key='y'>
                    <NavLink to='payGroundTable'>代付后台财务报表</NavLink>
                  </Menu.Item>
                  <Menu.Item key='z'>
                    <NavLink to='payGroundRecord'>代付后台入金记录</NavLink>
                  </Menu.Item>
                  <Menu.Item key='001'>
                    <NavLink to='payGroundAccunt'>代付后台商户账变</NavLink>
                  </Menu.Item>
                </SubMenu> */}
              </Menu>
            </div>
          </Sider>
          <Layout className={coll ? styles.ml : styles.mr}>
            <Header style={{ padding: 0 }}>
              <Row>
                <Col span={2}> {React.createElement(coll ? MenuUnfoldOutlined : MenuFoldOutlined, { onClick: toggle })}</Col>
                <Col span={1} offset={19}>
                  <Badge dot >
                    <BellOutlined onClick={() => Info('top')} />
                  </Badge>
                </Col>
                <Col span={1}>
                  {/* <span>{uName}</span> */}
                  <Popover content={content} trigger="hover">
                    <UserOutlined />
                  </Popover>
                </Col>
              </Row>
            </Header>
            <Content style={{
              margin: '24px 16px 0',
              overflow: 'initial',
              backgroundColor: 'rgb(24,24,24)',
              padding: '20px'
            }}>
              <Suspense fallback={<div>loading...</div>}>
                {element}
              </Suspense>
            </Content>
          </Layout>
        </Layout>
      </Spin>
    </div>
  )
}

